<template>
  <el-dialog
    v-model="dialogVisible"
    title="检验"
    width="80%"
    @close="closeDialog"
  >
    <div style="font-size: 16px; font-weight: 600; color: #5314bd">报检单</div>
    <div style="height: 20px"></div>
    <el-table
      :cell-style="{ padding: '6px 6px' }"
      :data="inspectData"
      highlight-current-row
      @current-change="handleCurrentChange"
    >
      <el-table-column label="序号" type="index" width="80" />
      <el-table-column label="报检单号" prop="inspectCode" width="180" />
      <el-table-column label="报检类型" prop="invcode" width="200">
        <template #default="scope">
          <el-row>
            <span style="font-size: 16px; font-weight: 700; color: #000">
              {{ scope.row.inspectTypeName }}
            </span>
          </el-row>
          <el-row>
            <span>
              {{ scope.row.sourcePk }}
            </span>
          </el-row>
        </template>
      </el-table-column>

      <el-table-column label="存货编码" prop="invcode" />
      <el-table-column label="名称型号" prop="invcode">
        <template #default="scope">
          <el-row>
            <span style="font-size: 16px; font-weight: 700; color: #000">
              {{ scope.row.invname }}
            </span>
          </el-row>
          <el-row>
            <span>
              {{ scope.row.invspec }}
            </span>
          </el-row>
        </template>
      </el-table-column>
      <el-table-column label="报检数" width="150">
        <template #default="scope">
          <span style="font-size: 16px; font-weight: 600; color: #5314bd">
            {{ scope.row.qty }}&nbsp;{{ scope.row.measName }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="检验数" width="150">
        <template #default="scope">
          <span style="font-size: 16px; font-weight: 600; color: #5314bd">
            {{ scope.row.checkQty }}&nbsp;{{ scope.row.measName }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="检验方式" prop="checkModeName" width="120" />
      <el-table-column label="检验完毕" width="120">
        <template #default="scope">
          <el-icon v-if="scope.row.state == 1" color="#30DF80" size="20">
            <Select />
          </el-icon>
          <el-icon v-else color="#DF3730" size="20">
            <SemiSelect />
          </el-icon>
        </template>
      </el-table-column>
      <el-table-column label="创建信息" prop="invcode">
        <template #default="scope">
          <el-row>
            <span>
              {{ scope.row.createUser }}
            </span>
          </el-row>
          <el-row>
            <span>
              {{ scope.row.createTime }}
            </span>
          </el-row>
        </template>
      </el-table-column>
    </el-table>
    <div style="height: 20px"></div>
    <el-form-item label="选择检验标准">
      <el-select
        v-model="state.pkStandardDoc"
        value-key="pkStandardDoc"
        @change="queryItems"
      >
        <el-option
          v-for="doc in docs"
          :key="doc.pkStandardDoc"
          :label="doc.standardName"
          :value="doc.pkStandardDoc"
        />
      </el-select>
    </el-form-item>
    <el-table
      :cell-style="{ padding: '6px 6px' }"
      :data="items"
      highlight-current-row
      @current-change="handleCurrentChange"
    >
      <el-table-column label="序号" type="index" width="80" />
      <el-table-column label="项目号" prop="itemCode" width="180" />
      <el-table-column label="项目名称" prop="itemName" width="300" />
      <el-table-column label="通过标准" prop="itemStandard" width="300" />
      <el-table-column label="不合格数" width="150">
        <template #default="scope">
          <el-input-number
            v-model="scope.row.unqualifiedQty"
            :controls="false"
            :min="0"
            style="width: 100%"
            @blur="(e) => buhege(e, scope)"
          />
        </template>
      </el-table-column>
      <el-table-column label="备注">
        <template #default="scope">
          <el-input v-model="scope.row.remark" placeholder="" />
        </template>
      </el-table-column>
    </el-table>
    <div style="height: 14px"></div>

    <div style="font-size: 16px; font-weight: 600; color: #5314bd">检验单</div>
    <div style="height: 20px"></div>
    <el-table
      :cell-style="{ padding: '6px 6px' }"
      :data="checkData"
      highlight-current-row
      @current-change="handleCurrentChange"
    >
      <el-table-column label="序号" type="index" width="80" />
      <el-table-column label="检验类型" prop="invcode" width="200">
        <template #default="scope">
          <el-row>
            <span style="font-size: 16px; font-weight: 700; color: #000">
              {{ scope.row.inspectTypeName }}
            </span>
          </el-row>
          <el-row>
            <span>
              {{ scope.row.sourcePk }}
            </span>
          </el-row>
        </template>
      </el-table-column>
      <el-table-column label="存货编码" prop="invcode" />
      <el-table-column label="名称型号" prop="invcode">
        <template #default="scope">
          <el-row>
            <span style="font-size: 16px; font-weight: 700; color: #000">
              {{ scope.row.invname }}
            </span>
          </el-row>
          <el-row>
            <span>
              {{ scope.row.invspec }}
            </span>
          </el-row>
        </template>
      </el-table-column>
      <el-table-column label="合格数" width="150">
        <template #default="scope">
          <span style="font-size: 16px; font-weight: 600; color: #5314bd">
            {{ scope.row.qty }}&nbsp;{{ scope.row.measName }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="不合格数" width="150">
        <template #default="scope">
          <span style="font-size: 16px; font-weight: 600; color: #5314bd">
            {{ scope.row.unqualifiedQty }}&nbsp;{{ scope.row.measName }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="不合格数" width="150">
        <template #default="scope">
          <span style="font-size: 16px; font-weight: 600; color: #5314bd">
            {{ scope.row.yiProcessQty }}&nbsp;{{ scope.row.measName }}
          </span>
        </template>
      </el-table-column>
      <!-- <el-table-column label="处理方式">
        <template #default="scope">
          <el-select
            v-model="scope.row.pkProcess"
            value-key="id"
            @change="(e) => toChangePk(e)"
          >
            <el-option
              v-for="processType in processTypes"
              :key="processType.id"
              :label="processType.name"
              :value="processType.id"
            />
          </el-select>
        </template>
      </el-table-column> -->
    </el-table>
    <div style="height: 14px"></div>
    <div style="font-size: 16px; font-weight: 600; color: #5314bd">检验单</div>
    <div style="height: 10px"></div>
    <vab-query-form>
      <vab-query-form-left-panel>
        <el-button :icon="Search" plain type="primary" @click="processZh">
          增行
        </el-button>
        <el-button :icon="CircleCheck" plain type="danger" @click="deleteHang">
          删行
        </el-button>
      </vab-query-form-left-panel>
    </vab-query-form>
    <div style="height: 3px"></div>
    <el-table
      :cell-style="{ padding: '6px 6px' }"
      :data="qmProcessBills"
      highlight-current-row
      @current-change="handleCurrentChange"
    >
      <el-table-column type="index" width="50" />
      <el-table-column label="处理方式" width="250">
        <template #default="scope">
          <el-select
            v-model="scope.row.pkProcessMode"
            value-key="id"
            @change="(e) => toChangePk(e)"
          >
            <el-option
              v-for="processMode in processModes"
              :key="processMode.pkProcessMode"
              :label="processMode.modeName"
              :value="processMode.pkProcessMode"
            />
          </el-select>
        </template>
      </el-table-column>
      <el-table-column label="处理数量" width="250">
        <template #default="scope">
          <el-input-number
            v-model="scope.row.processQty"
            :controls="false"
            :min="0"
            style="width: 100%"
            @blur="(e) => porcessQtyBlur(e, scope)"
          />
        </template>
      </el-table-column>
    </el-table>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="checked">检验</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
  import { localStorageConfig } from '@/config/localstorage.config'
  import { queryStandardDocApi, queryItemsApi, checkApi } from '@/api/qm/index'
  import { queryProcessModeApi } from '@/api/qm/standard_api'

  const $baseLoading = inject('$baseLoading')
  const $baseMessage = inject('$baseMessage')

  const pkCorp = localStorage.getItem(localStorageConfig.__pkCorp)

  const dialogVisible = ref(false)
  const inspectData = ref([])
  const docs = ref()
  const state = reactive({})
  const items = ref()
  const checkData = ref([])
  const processModes = ref()
  const qmProcessBills = ref([])

  const openDialog = (value) => {
    inspectData.value = []
    inspectData.value.push(value)
    checkData.value = inspectData.value
    checkData.value[0].unqualifiedQty = 0
    queryStandardDoc()
    queryProcessMode()
    dialogVisible.value = true
  }

  const queryProcessMode = async () => {
    let params = {
      inspectType: inspectData.value[0].inspectType,
    }
    const { code, data } = await queryProcessModeApi(params)
    if (code === 2000) {
      processModes.value = data
    }
  }

  const queryStandardDoc = async () => {
    let params = {
      pkCorp: pkCorp,
    }
    const { code, data } = await queryStandardDocApi(params)
    if (code === 2000) {
      docs.value = data
    }
  }

  const queryItems = async () => {
    let params = {
      pkStandardDoc: state.pkStandardDoc,
    }
    const { code, data } = await queryItemsApi(params)
    if (code === 2000) {
      items.value = data
    }
  }
  const buhege = (e, scope) => {
    let qty =
      checkData.value[0].unqualifiedQty +
      -scope.row.tempQty +
      e.target.valueAsNumber
    if (qty > checkData.value[0].qty) {
      $baseMessage('不合格数不可以大于报检数量', 'warning')
      scope.row.unqualifiedQty = scope.row.tempQty
      return
    }
    checkData.value[0].unqualifiedQty = qty
    checkData.value[0].yiProcessQty = qty
    checkData.value[0].qty -= qty
    scope.row.tempQty = e.target.valueAsNumber
  }

  const toChangePk = (e) => (checkData.value[0].processType = e)

  const processZh = () => {
    if (checkData.value[0].unqualifiedQty == 0) {
      $baseMessage('请先做检验不合格操作', 'warning')
      return
    }
    let processItem = {
      pkProcessMode: '',
      processQty: 0,
      tempQty: 0,
    }
    qmProcessBills.value.push(processItem)
  }

  const porcessQtyBlur = (e, scope) => {
    let qty =
      checkData.value[0].yiProcessQty +
      scope.row.tempQty -
      e.target.valueAsNumber
    if (qty < 0) {
      $baseMessage('处理数量不能高于不合格数', 'warning')
      scope.row.processQty = scope.row.tempQty
      return
    }
    checkData.value[0].yiProcessQty = qty
    scope.row.tempQty = e.target.valueAsNumber
  }

  const deleteHang = () => {
    console.log(qmProcessBills)
  }

  const checked = async () => {
    if (checkData.value[0].qty < 0) {
      $baseMessage('检验数量不可以大于报检数量', 'error')
      return
    }
    checkData.value[0].items = items.value
    checkData.value[0].qmProcessBills = qmProcessBills.value
    const load = $baseLoading()
    try {
      const { code, msg } = await checkApi(checkData.value[0])
      if (code === 2000) {
        $baseMessage(msg, 'success')
        dialogVisible.value = false
        _emit('success-callback')
      } else {
        $baseMessage(msg, 'error')
      }
    } finally {
      load.close()
    }
  }

  const closeDialog = () => {
    items.value = []
    state.pkStandardDoc = ''
    qmProcessBills.value = []
  }

  defineExpose({ openDialog })
  const _emit = defineEmits(['success-callback'])
</script>
